<template>
	<!-- 订单-评价 -->
	<view class="evaluate public">
		<view class="main">
			<!-- 头部备注 -->
			<view class="header-notes">
				提交评价或建议，鼓励骑手和商家做的更好
			</view>
			<!-- 商家评价 -->
			<view class="MerchantEvaluation">
				<!-- 头部 -->
				<view class="header flexjcsb">
					<view class="">
						您对商家或商品满意吗？
						<!-- {{arr.list.site_name}} -->
					</view>
					<view class="">
						<radio-group name="" v-model="anonymous" @click="bindAnonymous">
							<label>
								<radio value="" :checked="anonymous" style="transform: scale(0.7);" /><text>匿名提交</text>
							</label>
						</radio-group>
					</view>
				</view>
				<!-- 内容 -->
				<view class="MerchantEvaluation-main">
					<view class="MerchantEvaluation-main-header">
						<view class="MerchantEvaluation-main-header-title" v-for="item in arr.list">
							<view class="">
								<!-- <image src="https://img2.baidu.com/it/u=373805894,1655627384&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode=""></image> -->
								<image :src="'https://songcan.xyct1688.com/' + item.sku_image" mode=""></image>
							</view>
							<view class="">
								<!-- 咖喱鸡肉饭+饮料（一食堂二楼12窗口） -->
								{{ item.sku_name }}
							</view>
						</view>
						<view class="evaluate">
							<!-- <view class="">
								<text>总体</text><uni-rate v-model="overallValue" activeColor="#F14500" @change="overallValueOnChange" />
							</view>
							<view class="">
								<text>包装</text><uni-rate v-model="packageValue" activeColor="#F14500" @change="packageValueOnChange" />
							</view> -->
							<view class="">
								<text>评分</text><uni-rate v-model="value" activeColor="#F14500" @change="onChange" />
							</view>
						</view>
					</view>
					<view class="MerchantEvaluation-main-footer">
						<textarea name="" id="" placeholder="发表你的想法" v-model="content"></textarea>
						<uni-file-picker limit='3' fileMediatype="image" :imageStyles="imageStyles" @select="select">
							<view class="addImage">
								<view class="">
									<uni-icons type="camera" color="#BFBFBF" size="60rpx"></uni-icons>
								</view>
								<view class="">
									添加图片
								</view>
							</view>
						</uni-file-picker>
					</view>
				</view>
			</view>
			<!-- 骑手评价 -->
			<view class="RiderEvaluation" v-if="source == 0">
				<!-- 头部 -->
				<view class="header flexjcsb">
					<view class="">
						您对骑手满意吗？
					</view>
					<view class="">
						<text>已对骑手匿名</text>
					</view>
				</view>
				<!-- 内容 -->
				<view class="RiderEvaluation-main">
					<view class="RiderEvaluation-main-header">
						<view class="">
							<image src="https://img2.bidu.com/it/u=373805894,1655627384&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
								mode=""></image>
						</view>
						<view class="RiderEvaluation-main-header-right">
							<view class="">
								{{ arr.deliveryman.realname }}
							</view>
							<view class="">
								{{ arr.deliveryman.sign_time }} 左右送达
							</view>
						</view>
					</view>
					<!-- 满意或不满意 -->
					<view class="satisfied flexjcsb">
						<view class="satisfied-item flexjcc" :class="satisfiedNum == 1 ? 'SatisfiedSelection' : ''"
							@click="satisfiedTab(1)">
							<view class="">
								<image :src="Dissatisfied" mode=""></image>
							</view>
							<view class="">
								<text>不满意</text>
							</view>
						</view>
						<view class="satisfied-item flexjcc" :class="satisfiedNum == 2 ? 'SatisfiedSelection' : ''"
							@click="satisfiedTab(2)">
							<view class="">
								<image :src="satisfiedImage" mode=""></image>
							</view>
							<view class="">
								<text>满意</text>
							</view>
						</view>
					</view>
					<!-- 骑手评价 -->
					<view class="incentive" v-if="satisfiedNum == 1">
						<view class="incentive-item flexjcc" :class="incentiveNum == index ? 'incentiveSelection' : ''"
							v-for="(item, index) in incentive" :key="index" @click="incentiveTab(index)">
							<text>{{ item }}</text>
						</view>
					</view>
					<view class="WritingCabinet">
						<textarea name="" id="" placeholder="告诉骑手,激励我们做的更好" v-model="deliverContent"></textarea>
					</view>
				</view>
			</view>
			<!-- <image src="../../static/orderForGoods/evaluate/haveAHardTime.png" mode=""></image> -->
			<!-- 发布按钮 -->
			<view class="buttonBox">
				<button @click="release">发布</button>
			</view>
		</view>
	</view>
</template>

<script>
const $api = require('@/utils/request.js').API
export default {
	data() {
		return {
			imageStyles: {
				width: '160rpx',
				height: '160rpx',
				border: {
					"style": "dashed", 	// 边框样式
				}
			},
			// value: 4,

			satisfiedNum: 0,	// 满意或不满意
			Dissatisfied: require('../../static/orderForGoods/evaluate/haveAHardTime.png'),	// 难过
			satisfiedImage: require('../../static/orderForGoods/evaluate/smilingFace.png'),	// 笑脸

			// incentive: ['礼貌热情','标签词语','标签词语','写评价'],
			incentive: [],
			incentiveNum: 0,
			options: [],
			arr: [],
			anonymous: false,	// 匿名
			deliverContent: '',	// 配送员评价内容
			overallValue: 0,	// 总体评分
			packageValue: 0,	// 包装评分
			value: 0,

			content: '',
			imageArr: [],
			// 1 自提，0 外卖
			source: 0,
		}
	},
	onLoad(options) {
		this.options = JSON.parse(options.item)
		this.source = options.source
		this.evaluativeInformation()
		this.deliveryMetaEvaluationTerms()
	},
	methods: {
		// 评价订单页展示信息
		evaluativeInformation() {
			$api.postEvaluativeInformation({
				order_id: this.options.order_id,
			}).then(res => {
				this.arr = res.data.data
			})
		},
		// 配送员评价词
		deliveryMetaEvaluationTerms() {
			$api.postDeliveryMetaEvaluationTerms({}).then(res => {
				this.incentive = res.data.data
			})
		},
		release() {

			let order_goods_id = ''
			let goods_id = ''
			let sku_id = ''
			let sku_name = ''
			let sku_price = ''
			let sku_image = ''
			let site_id = ''
			this.options.order_goods.forEach(item => {
				order_goods_id = item.order_goods_id
				goods_id = item.goods_id
				sku_id = item.sku_id
				sku_name = item.sku_name
				sku_price = item.price
				sku_image = item.sku_image
				site_id = item.site_id
			})
			let goods_evaluate = [{
				content: this.content,	// 评价内容
				images: String(this.imageArr),	// 评价图片
				// scores: [this.overallValue,this.packageValue],	// 评分
				scores: this.value,
				explain_type: this.value == 5 ? 1 : this.value >= 4 ? 1 : this.value < 1 ? 2 : this.value > 4 ? 2 : this.value == 3 ? 2 : 3,
				order_goods_id: order_goods_id,

				goods_id: goods_id,
				sku_id: sku_id,
				sku_name: sku_name,
				sku_price: sku_price,
				sku_image: sku_image,
				site_id: site_id,
			}]

			let obj = {
				// token: uni.getStorageSync('token'),	// token
				order_id: this.options.order_id,	// 订单id
				order_on: this.options.order_on,	// 订单编号
				member_name: this.options.member_name,	// 用户昵称
				member_headimg: this.options.member_headimg,	// 用户头像
				// is_anonymous: this.options.is_anonymous,	// 是否匿名评价 0 不是，1 是
				is_anonymous: this.anonymous == true ? 1 : false,
				// goods_evaluate: this.options.goods_evaluate, 	// 商品评价
				goods_evaluate: JSON.stringify(goods_evaluate),
				shop_desccredit: this.options.shop_desccredit,	// 店铺描述分值
				shop_servicecredit: this.options.shop_servicecredit,	// 店铺服务分值
				shop_deliverycredit: this.options.shop_deliverycredit,	// 店铺配送分值
				deliveryman_id: this.options.deliveryman_id,	// 配送员id
				deliveryman_satisfied: this.satisfiedNum == 1 ? 0 : 1,	//是否对配送员满意 1 满意，0 不满意
				// deliveryman_content: this.options.deliveryman_content,	// 配送员评价内容
				deliveryman_content: this.deliverContent,
				// deliveryman_word: this.options.deliveryman_word,	// 配送员标签
				deliveryman_word: this.incentive[this.incentiveNum],
			}

			if (obj.deliveryman_satisfied == 1) {
				obj.deliveryman_word = ''
			}
			$api.postEvaluationSubmission(obj).then(res => {
				uni.showToast({
					title: res.data.message,
					icon: '',
					duration: 2000
				})
				uni.switchTab({
					url: '/pages/Ordergoods/Ordergoods'
				});
			})
		},
		// overallValueOnChange(e) {
		// 	this.overallValue = JSON.stringify(e.value)
		// },
		// packageValueOnChange(e) {
		// 	this.packageValue = JSON.stringify(e.value)
		// },
		onChange(e) {
			this.value = JSON.stringify(e.value)
		},
		bindAnonymous() {
			this.anonymous = !this.anonymous
		},
		select(res) {
			uni.uploadFile({
				url: 'https://songcan.xyct1688.com/api/upload/commonimg',
				filePath: res.tempFilePaths[0],
				name: 'file',
				formData: {
					'user': 'test'
				},
				success: (uploadFileRes) => {
					// this.imageArr = JSON.parse(uploadFileRes.data).data.pic_path
					this.imageArr.push(JSON.parse(uploadFileRes.data).data.pic_path)
				},
				fail: e => {

				},
			});
		},
		// 满意或不满意
		satisfiedTab(index) {
			this.satisfiedNum = index
			if (this.satisfiedNum !== 1) {
				this.satisfiedImage = require('../../static/orderForGoods/evaluate/smilingFaceSelected.png')
				this.Dissatisfied = require('../../static/orderForGoods/evaluate/haveAHardTime.png')
			} else if (this.satisfiedNum !== 2) {
				this.Dissatisfied = require('../../static/orderForGoods/evaluate/haveAHardTimeSelected.png')
				this.satisfiedImage = require('../../static/orderForGoods/evaluate/smilingFace.png')
			}
		},
		// 骑手评价
		incentiveTab(index) {
			this.incentiveNum = index
		}
	}
}
</script>

<style lang="less" scoped>
.evaluate {
	background: #FBFBFB;

	.main {
		width: 702rpx;
		margin: auto;

		// 头部备注
		.header-notes {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #F14500;
			padding: 27rpx 0 22rpx 0;
		}

		// 商家评价和骑手评价头部
		.header {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #4A4A4A;
			padding: 28rpx 26rpx 0 29rpx;
			// padding-left: 29rpx;
			// padding-top: 28rpx;
			// padding-right: 26rpx;

			view:last-child {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #4A4A4A;
			}
		}

		// 商家评价
		.MerchantEvaluation {
			width: 702rpx;
			// height: 672rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(118, 118, 118, 0.09);
			border-radius: 10rpx;

			// 内容
			.MerchantEvaluation-main {
				padding-left: 29rpx;
				padding-top: 20rpx;
				padding-right: 26rpx;
				padding-bottom: 30rpx;

				.MerchantEvaluation-main-header {
					border-bottom: 1px solid #F9F9F9;

					// border-bottom: 1px solid red;
					.MerchantEvaluation-main-header-title {
						display: flex;
						align-items: center;
						padding-bottom: 20rpx;

						image {
							width: 102rpx;
							height: 102rpx;
							border-radius: 10rpx;
						}

						view:last-child {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #333333;
							padding-left: 19rpx;
						}
					}

					.evaluate {
						padding-bottom: 30rpx;

						view {
							display: flex;
							align-items: center;
							height: 60rpx;

							text {
								padding-right: 27rpx;
							}
						}
					}
				}

				.MerchantEvaluation-main-footer {
					textarea {
						width: 100%;
						height: 119rpx;
						padding-top: 20rpx;
					}

					.addImage {
						text-align: center;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #BFBFBF;
					}
				}
			}
		}

		// 骑手评价
		.RiderEvaluation {
			width: 702rpx;
			// height: 458rpx;
			background: #FFFFFF;
			// background: aqua;
			box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(118, 118, 118, 0.09);
			border-radius: 10rpx;
			margin-top: 16rpx;

			.RiderEvaluation-main {
				padding-left: 29rpx;
				padding-top: 20rpx;
				padding-right: 26rpx;

				// 骑手头部
				.RiderEvaluation-main-header {
					display: flex;

					image {
						width: 82rpx;
						height: 81rpx;
						border-radius: 10rpx;
					}

					// 骑手头部右侧
					.RiderEvaluation-main-header-right {
						view {
							padding-left: 21rpx;
						}

						view:first-child {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						view:last-child {
							font-size: 18rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #6F6F6F;
							padding-top: 21rpx;
						}
					}
				}

				// 满意或不满意
				.satisfied {
					margin-top: 43rpx;

					.satisfied-item {
						width: 308rpx;
						height: 59rpx;
						text-align: center;
						background: #E9E9E9;
						border-radius: 30rpx;

						image {
							width: 34rpx;
							height: 34rpx;
							padding-top: 10rpx;
						}

						text {
							padding-left: 11rpx;
						}
					}
				}

				// 满意或不满意选中样式
				.SatisfiedSelection {
					width: 308rpx;
					height: 59rpx;
					// background: rgba(255, 204, 153, 1) !important;
					background: rgba(241, 69, 0, 0.1) !important;
					// background: #F14500 !important;
					// opacity: 0.12;
					border-radius: 30rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #F14500;
				}

				// 骑手评价
				.incentive {
					display: flex;
					flex-wrap: wrap;
					margin-top: 23rpx;

					.incentive-item {
						width: 135rpx;
						height: 36rpx;
						background: #E9E9E9;
						border-radius: 18rpx;
						margin: 10rpx 10rpx;

						text {
							font-size: 18rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #585757;
						}
					}
				}

				.incentiveSelection {
					width: 135rpx;
					height: 36rpx;
					// background: rgba(255, 204, 153, 1) !important;
					background: rgba(241, 69, 0, 0.1) !important;
					// background: #F14500 !important;
					// opacity: 0.12;
					border-radius: 30rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #F14500;
				}
			}
		}

		// 写评价
		.WritingCabinet {
			margin-top: 14rpx;
			padding-bottom: 20rpx;

			textarea {
				width: 591rpx;
				height: 47rpx;
				background: #F6F6F6;
				border-radius: 5rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #868686;
				padding: 20rpx 19rpx;
			}
		}

		// 发布按钮
		.buttonBox {
			position: fixed;
			bottom: 20rpx;
			left: 60rpx;
			width: 630rpx;
			height: 88rpx;
			margin: auto;
			margin-top: 42rpx;

			button {
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				background: #F14500;
				border-radius: 44rpx;
			}
		}
	}
}
</style>